<template>
    <div class="livingBox">
        <van-sticky>
            <van-nav-bar title="生活缴费" left-text="返回" left-arrow right-text="缴费记录" @click-left="onClickLeft"
                @click-right="onClickRight" />
        </van-sticky>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banner" :key="item.id">
                <img :src="'http://218.7.112.123:10001/'+item.advImg" alt="" />
            </van-swipe-item>
        </van-swipe>

        <div class="classity">
            <div class="classitys">
                <div class="cost" v-for="item in payList" :key="item.id">
                    <div class="icon">
                        <img :src="'http://218.7.112.123:10001/'+item.imgUrl" alt="" />
                    </div>
                    <div>{{item.liveName}}</div>
                    <div class="pay" @click="gotoPay(item)">立即缴费</div>
                </div>
            </div>
            <div class="tips">
                <van-notice-bar left-icon="volume-o" text="水电按时缴费有利于涨积分,获取绿色能量,若不按时缴费则将进黑名单!!!" />
            </div>
        </div>
        <div class="tab">
            <van-tabs v-model="active" @click="changeTitle">
                <van-tab v-for="item in titleList" :title="item.name" :key="item.id" :name="item.id">
                    <div class="newsList">
                        <div class="newsOne" v-for="news in newsList" :key="news.id" @click="gotoDetail(news)">
                            <div class="newsImg">
                                <img :src="'http://218.7.112.123:10001/'+news.cover" alt="">
                            </div>
                            <div class="context">
                                <div class="title">
                                    {{news.title}}
                                </div>
                                <div class="text" v-html="news.content">

                                </div>
                                <div class="comments">
                                    <span>评论总数 : {{news.commentNum}}</span>
                                    <span class="commentsTime">评论时间 : {{news.publishDate}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>

</template>
<script>
import nav from "@/mixin/nav";
import { bannerList, classityPrice, newsClassityQuery, newsKeyQuery } from "@/service/living/linvingService";
export default {
    mixins: [nav],
    data() {
        return {
            banner: [],
            payList: [],
            active: 0,
            titleList: [],
            newsList: [],
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            this.$router.push("/living/payrecord");
        },
        async changeTitle(name) {
            let { data: list } = await newsKeyQuery({
                type: name,
            })
            this.newsList = list.rows;
        },
        gotoDetail(news) {
            this.$router.push("/living/detail/" + news.id)
        },
        gotoPay(item) {
            if (item.liveName == "手机话费") {
                this.$router.push("/living/phonepay");
            } else {
                this.$router.push("/living/pay");
            }
        }
    },
    async created() {
        let { data } = await bannerList();
        this.banner = data.rows;

        let { data: list } = await classityPrice();
        this.payList = list.data;


        let { data: title } = await newsClassityQuery();
        this.titleList = title.data;


        let { data: keyList } = await newsKeyQuery({
            type: title.data[0].id,
        })

        this.newsList = keyList.rows;

    }
}

</script>
<style scoped lang="scss">
.livingBox {
    height: 100%;
    background-color: #EDEDED;
}

.tab {
    background-color: #fff;
}

.newsList {
    padding: 10px;

    .newsOne {
        padding: 10px 0;
        display: flex;
        border-bottom: 1px solid #ebe9e9;

        .newsImg {
            width: 100px;


            img {
                width: 100%;
                height: 100%;
            }
        }

        .context {
            width: calc(100% - 100px);
            margin-left: 10px;

            .text {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 3;
                /*设置多行的行数，示例为2行*/
            }

            .commentsTime {
                margin-left: 20px;
            }

            .title {
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.classity {
    // height: 180px;
    background-color: #fff;
    margin: 10px;
    border-radius: 10px;

    padding: 10px;


    .classitys {
        display: flex;
        justify-content: space-between;

        .cost {
            height: 100px;
            width: 22%;
            border-radius: 10px;
            background-color: #a1d2f0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .iconfont {
                font-size: 30px;
                color: red;
            }

            .icon {
                width: 100%;
                // padding: 20px;
                padding: 0 10px;
                height: 50px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .pay {
                padding: 5px 15px;
                background-color: #0297f4;
                border-radius: 10px;
                color: #fff;
                font-size: 10px;
            }

        }
    }

    .tips {
        margin-top: 15px;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    height: 150px;
    background-color: #39a9ed;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>